<!--
* @author wn
* @date 2022/05/16 15:14:01
* @description: 子分类商品展示
!-->
<template>
	<router-link :to="`/product/${good.id}`" class="goods-item">
		<img v-lazy="good.picture" alt="" />
		<p class="name ellipsis">{{ good.name }}</p>
		<p class="desc ellipsis">{{ good.desc }}</p>
		<p class="price">&yen;{{ good.price }}</p>
	</router-link>
</template>
<script>
export default {
	name: 'GoodItem',
	props: {
		good: {
			type: Object,
			default: () => ({}),
		},
	},
}
</script>
<style scoped lang="less">
.goods-item {
	display: block;
	width: 220px;
	padding: 20px 30px;
	text-align: center;
	.hoverShadow();
	img {
		width: 160px;
		height: 160px;
	}
	p {
		padding-top: 10px;
	}
	.name {
		font-size: 16px;
	}
	.desc {
		color: #999;
		height: 29px;
	}
	.price {
		font-size: 20px;
		color: @priceColor;
	}
}
</style>
